<html>
  <head>
    <script type="text/javascript" src="../svgcanvas.js"></script>
    <script type="text/javascript">
function draw() {
  var Particle = function() {
    var x = parseInt(Math.random() * width);
    var y = parseInt(Math.random() * height);
    var xvel = parseInt(Math.random() * 10) - 5;
    var yvel = parseInt(Math.random() * 10) - 5;
    var r = parseInt(Math.random() * 255);
    var g = parseInt(Math.random() * 255);
    var b = parseInt(Math.random() * 255);
    var a = 0;
    
    this.update = function() {
      if(a > 2 * 3.14) return;
      var px = x, py = y;
      x += xvel, y += yvel;
      yvel += 0.1;
      if(x < 0 || width < x) xvel *= -1;
      if(y < 0 || height < y) yvel *= -1;
      svg.line(px, py, x, y, {
        stroke: 'rgb('+r+','+g+','+b+')',
        opacity: Math.sin(a+=0.01)
      });
    }
  }
  
  var width = 400;
  var height = 400;
  var particles = new Array(20);
  var svg = new SVG(document.body, width, height);
  for(var i=0; i<particles.length; i++) {
    particles[i] = new Particle();
  }
  
  setInterval(function() {
    for(var i=0; i<particles.length; i++)
      particles[i].update();
  }, 1000 / 60);
}
    </script>
  </head>
  <body onload="draw()" />
</html>
